document.querySelector('span.username').innerHTML = localStorage.getItem('shuju')?JSON.parse(localStorage.getItem('shuju')).uname:''
const Authorization = localStorage.getItem('shuju')?JSON.parse(localStorage.getItem('shuju')).token:''
async function getData() {
    let res = await axios({
        url:'/dashboard'
    })
    for(key in res.data.data.overview){
        document.querySelector(`.${key}`).innerHTML = res.data.data.overview[key]
    }
    console.log(res.data.data);
    
    renderLine(res.data.data.year)
    renderSalary(res.data.data.salaryData)
    renderGroup(res.data.data.groupData)
    document.querySelector('#btns').addEventListener('click',e=>{
        document.querySelectorAll('.btn.btn-xs').forEach(item=>item.classList.remove('btn-blue'))
        renderGroup(res.data.data.groupData,+e.target.innerText-1)
        e.target.classList.add('btn-blue')
    })
    renderGenderSalary(res.data.data.salaryData)
    renderProvince(res.data.data.provinceData)
}
getData()
document.querySelector('#logout').addEventListener('click',()=>{
    pxmu.diaglog('确定退出登录吗？')
    localStorage.removeItem('shuju')
    setTimeout(()=>{location.href = './login.html'},1000)
})

function renderLine(res){
    echarts.init(document.querySelector('#line')).setOption({
        title: {
            text: '2022全学科薪资走势',
            textStyle:{
                textShadowColor:'red',
                textShadowBlur:3,
                textShadowOffsetX:2,
                textShadowOffsetY:2
            },
            top:10,
            left:10
        },
        tooltip: {},
        legend: {},
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.map(item=>item.month)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            symbolSize :[10,10],
            data: res.map(item=>item.salary),
            type: 'line',
            smooth: true,
            lineStyle:{
              width:5,
              // 颜色
               color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 0,
                 colorStops: [{
                   offset: 0, color: '#479dee' // 0% 处的颜色
                 }, {
                   offset: 1, color: '#5c75f0' // 100% 处的颜色
                 }],
                 global: false // 缺省为 false
               }
            },
           areaStyle: {
             color:{
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                     offset: 0, color: '#b2d7f7' // 0% 处的颜色
                 }, {
                     offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                 }],
                 global: false // 缺省为 false
               }
           }
            }
        ]
    })
}
function renderSalary(res){
    echarts.init(document.querySelector('#salary')).setOption({
        title:{
            text: '班级薪资分布',
            textStyle:{
                textShadowColor:'red',
                textShadowBlur:3,
                textShadowOffsetX:2,
                textShadowOffsetY:2
            },
            top:'5%',
            left:'5%'
        },
        tooltip: {trigger: 'item'},
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
            name: '薪资/人数',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data:res.map(({b_count,g_count,label})=>({value:b_count+g_count,name:label}))
            }
        ]
          
    })
}
function renderGroup(res,num=0){
    echarts.init(document.querySelector('#lines')).setOption({
        legend: {show:false},
        tooltip: {},
        dataset: {
            source:Object.values(res)[num]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar',name:'期望薪资' }, { type: 'bar',name:'就业薪资' }]
    })
}
function renderGenderSalary(res){
    let boy = res.map(({b_count,g_count,label})=>({name:label,value:b_count}))
    let girl = (res.map(({b_count,g_count,label})=>({name:label,value:g_count})))
    echarts.init(document.querySelector('#gender')).setOption({
        title: [{
            text: '男女薪资分布',
            top:10,
            left:10
          },
          {
            subtext: '男生',
            right: '5%',
            top: '45%',
            subtextStyle: {
                fontSize: 20,
                color: "#5470c6"
              },
          },
          {
            subtext: '女生',
            right: '5%',
            top: '85%',
            subtextStyle: {
                fontSize: 20,
                color: "#fc8452"
              },
          }
        ],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show:false
          },
          series: [
            {
              name: '薪资/人数',
              type: 'pie',
              radius: ['30%', '50%'],
              emphasis: {
                labelLine: {
                    show: true,
                    lineStyle: {
                      width: 1
                    }
                  }
              },
              data: boy,
              bottom:200,
            },
            {
                name: '薪资/人数',
                type: 'pie',
                radius: ['30%', '50%'],
                emphasis: {
                    labelLine: {
                        show: true,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data: girl,
                top:200,
              }
          ]
    })
}


function renderProvince(provinceData){
    const dom = document.querySelector('#map')
    const myEchart = echarts.init(dom)
    const dataList = provinceData
    const option = {
      title: {
        text: '籍贯分布',
        top: 15,
        left: 15,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: dataList,
        },
      ],
    }
    myEchart.setOption(option)
  }
  
